<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发票系统</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%;
        }
        #sidebar {
            width: 250px;
            height: 100vh;
            background-color: #4A4A4A;
            color: white;
            position: fixed;
            left: -250px;
            transition: left 0.3s;
            overflow: auto;
        }
        #sidebar.active {
            left: 0;
        }

        #sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #sidebar ul li a {
            display: block;
            padding: 80px;
            color: white;
            text-decoration: none;
            border-bottom: 1px solid #5A5A5A;
        }

        #sidebar ul li a:hover {
            background-color: #5A5A5A;
        }

        #content {
            margin-left: 0;
            transition: margin-left 0.3s;
            padding: 20px;
        }

        #content.with-sidebar {
            margin-left: 250px;
        }

        #hamburger {
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 1000;
            font-size: 24px;
            background: #4A4A4A;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
        }


        h1 {
            font-size: 3em;
            color: #005792;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
            padding: 20px;
            background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 2s infinite;
        }
    </style>
    <style>
        /* 表格通用样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 8px; /* 圆角 */
        }

        th, td {
            padding: 15px;
            text-align: left;
            border: 1px solid #ddd;
            transition: background-color 0.3s;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        th:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #005792;
        }

        td {
            background-color: #fff;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #eaeaea;
        }

        /* 挂号记录表格特定样式 */
        #Companys {
            font-size: 14px; /* 字体大小 */
        }

        #Companys th {
            width: auto; /* 自动宽度 */
        }

        #Companys td {
            white-space: nowrap; /* 防止单元格内容换行 */
        }

        /* 按钮样式 */
        button {
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            border: none; /* 无边框 */
            padding: 10px 20px; /* 内边距 */
            margin: 10px 0; /* 外边距 */
            cursor: pointer; /* 鼠标手形 */
            border-radius: 5px; /* 圆角 */
            font-size: 16px; /* 字体大小 */
        }

        button:hover {
            background-color: #5A5A5A; /* 鼠标悬停时的背景色 */
        }
    </style>
    <style>
        #registration {
            background-color: #f9f9f9; /* 表单背景色 */
            padding: 20px; /* 内边距 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影 */
            margin-top: 20px; /* 上边距 */
        }

        #registration label {
            display: block; /* 块级显示，便于设置上下边距 */
            margin-bottom: 5px; /* 下边距 */
            color: #333; /* 文字颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        #registration select,
        #registration textarea {
            width: 100%; /* 宽度100%，填满容器 */
            padding: 10px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            border: 1px solid #ddd; /* 边框 */
            box-sizing: border-box; /* 盒模型 */
            margin-bottom: 20px; /* 下边距 */
        }

        #registration textarea {
            resize: vertical; /* 允许垂直调整大小 */
        }

        #registration button {
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }

        #registration button:hover {
            background-color: #5A5A5A; /* 鼠标悬停时的背景色 */
        }

        /* 添加一些间距和对齐 */
        #registration ::placeholder {
            color: #aaa; /* 占位符文字颜色 */
        }
    </style>
    <!-- 修改密码 -->
    <style>
        /* 表单容器样式 */
        #UserPasswordChange {
            background: white;
            width: 100%;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none; /* 初始隐藏，可以通过JavaScript控制显示 */
        }
        /* 标题样式 */
        #UserPasswordChange h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        /* 表单样式 */
        #UserPasswordChange form {
            display: flex;
            flex-direction: column;
        }
        /* 标签样式 */
        #UserPasswordChange label {
            margin-top: 10px;
            color: #666;
        }
        /* 输入框和按钮样式 */
        #UserPasswordChange input[type="password"],
        #UserPasswordChange button {
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        /* 输入框获得焦点时的样式 */
        #UserPasswordChange input[type="password"]:focus,
        #UserPasswordChange button:focus {
            outline: none;
            border-color: #007bff;
        }
        /* 按钮样式 */
        #UserPasswordChange button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        /* 按钮悬停样式 */
        #UserPasswordChange button:hover {
            background-color: #0056b3;
        }
        /* 消息提示样式 */
        #UserPasswordChange #msg {
            font-size: 12px;
            color: #fd0061;
            margin-top: 10px;
        }
    </style>
    <!-- 退出按钮 -->
    <style>
        #logoutButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #e74c3c; /* 红色背景 */
            color: white; /* 白色文字 */
            border: none;
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }

        #logoutButton:hover {
            background-color: #c0392b; /* 悬停时更深的红色 */
        }
    </style>
    <!-- 查询按钮 -->
    <style>
        /* 表单容器样式 */
        #searchForm {
            background: white;
            width: 100%;
            max-width: 600px; /* 进一步缩小宽度 */
            margin: 50px auto;
            padding: 10px; /* 进一步缩小内边距 */
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        /* 标签样式 */
        #searchForm label {
            margin-top: 10px; /* 缩小上下边距 */
            color: #333;
            font-weight: bold;
            font-size: 12px; /* 缩小字体大小 */
        }

        /* 输入框样式 */
        #searchForm input[type="text"] {
            width: 100%;
            padding: 6px; /* 进一步缩小内边距 */
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px; /* 缩小字体大小 */
        }

        /* 按钮样式 */
        #searchForm button {
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            padding: 6px 12px; /* 进一步缩小内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 12px; /* 缩小字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
            margin-top: 15px; /* 缩小上边距 */
        }

        /* 按钮悬停样式 */
        #searchForm button:hover {
            background-color: #5A5A5A; /* 悬停时更深的背景色 */
        }

        /* 输入框占位符样式 */
        #searchForm input[type="text"]::placeholder {
            color: #aaa; /* 占位符文字颜色 */
            font-size: 12px; /* 缩小字体大小 */
        }
    </style>
</head>
<body>
<button id="hamburger">&#9776; Menu</button>
<button id="logoutButton" style="position: fixed; bottom: 10px; right: 10px;">退出</button>
<div id="sidebar">
    <ul>
        <li><a href="#" onclick="Data()">游戏主页</a></li>
        <li><a href="#" onclick="uploadBill()">上传发票</a></li>
        <li><a href="#" onclick="selectCompany()">公司查询</a></li>
        <li><a href="#" onclick="PasswordChange()">修改密码</a></li>
    </ul>
</div>
<div id="content">
    <h1>🌟 欢迎来到您的就业管理主页 🌟</h1>
    <!-- 侧边栏中的选项 -->
    <!-- 数据大屏区域 -->
    <div id="data" style="display: none;">


        <!--数据大屏区域你们来写-->




    </div>
    <!-- 与公司交互区域 -->
    <div id="registration" style="display: none;">
        <input type="file" id="imageInput" accept="image/*" style="display: none;">
        <button id="chooseButton">选择图片</button>
        <button id="uploadButton" disabled>上传图片</button>
        <div id="preview">图片将在这里显示</div>
    </div>
    <div id="records" style="display: none;">
        <form id="searchForm">
            <label for="companyNameInput">公司名称：</label>
            <input type="text" id="companyNameInput" name="name" placeholder="请输入公司名称">
            <br><br>
            <label for="companyNatureInput">公司性质：</label>
            <input type="text" id="companyNatureInput" name="nature" placeholder="请输入公司性质">
            <br><br>
            <label for="companyIndustryInput">所属行业：</label>
            <input type="text" id="companyIndustryInput" name="industry" placeholder="请输入所属行业">
            <br><br>
            <label for="companyProvinceInput">所在省份：</label>
            <input type="text" id="companyProvinceInput" name="province" placeholder="请输入所在省份">
            <br><br>
            <label for="companyCityInput">所在城市：</label>
            <input type="text" id="companyCityInput" name="city" placeholder="请输入所在城市">
            <br><br>
            <button type="button" id="searchButton">查询公司信息</button>
        </form>
        <div id="companyInfo">
            <h3>公司信息</h3>
            <table id="Companys">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>公司名称</th>
                    <th>公司性质</th>
                    <th>所属行业</th>
                    <th>所在省份</th>
                    <th>所在城市</th>
                </tr>
                </thead>
                <tbody>
                <!-- 动态插入的行 -->
                </tbody>
            </table>
            <div class="pagination">
                <button id="prevPage">上一页</button>
                <span id="currentPage"></span>
                <button id="nextPage">下一页</button>
                <p>总页数：<span id="totalPages">1</span></p>
                <p>总记录数：<span id="totalRecords">0</span></p>
            </div>
        </div>
    </div>
    <div id="UserPasswordChange" style="display: none;">
        <h1>修改密码</h1>
            <label for="usedpassword">请输入您曾经的密码：</label>
            <input type="password" id="usedpassword" name="usedpassword" required><br><br>
            <label for="nowpassword">请输入修改的密码：</label>
            <input type="password" id="nowpassword" name="nowpassword" required><br><br>
            <label for="nowpassword1">请 再 输 入 一  遍： </label>
            <input type="password" id="nowpassword1" name="nowpassword1" required><br><br>
            <span id="msg" style="font-size: 12px;color:#fd0061"></span><br>
            <button type="button" onclick="ChangePatPassword()">提交修改</button>
    </div>
</div>

<script>
    const imageInput = document.getElementById("imageInput");
    const chooseButton = document.getElementById("chooseButton");
    const uploadButton = document.getElementById("uploadButton");
    const previewDiv = document.getElementById("preview");

    chooseButton.addEventListener("click", function() {
        imageInput.click(); // 触发文件选择器
    });

    imageInput.addEventListener("change", function(event) {
        const file = event.target.files[0];
        if (!file) {
            alert("未选择文件！");
            uploadButton.disabled = true;
            previewDiv.innerHTML = "图片将在这里显示";
            return;
        }

        uploadButton.disabled = false;
        const imageUrl = URL.createObjectURL(file);
        previewDiv.innerHTML = `<img src="${imageUrl}" alt="Preview" style="max-width: 100%; height: auto;">`;
    });

    uploadButton.addEventListener("click", function() {
        const file = imageInput.files[0];
        if (!file) {
            alert("请先选择一个文件！");
            return;
        }
        uploadImage(file);
    });

    async function uploadImage(file) {
        const formData = new FormData();
        formData.append("image", file);

        try {
            const response = await fetch("/demo1/UploadServlet", {
                method: "POST",
                body: formData
            });

            if (!response.ok) {
                throw new Error("Network response was not ok.");
            }

            const data = await response.json();
            if (data.success) {
                alert("图片上传成功！");
                // 调用 AI 函数处理上传的图片
                await AI(data);
            } else {
                alert("图片上传失败：" + data.message);
            }
        } catch (error) {
            alert("图片上传失败：" + error.message);
        }
    }
    async function AI(data) {
        if (!data.url) {
            console.error("No image URL provided.");
            return;
        }

        const currentUrl = window.location.origin;
        const fullImageUrl = currentUrl + data.url;

        try {
            // 将 fullImageUrl 包装成 JSON 对象
            const requestBody = { imageUrl: fullImageUrl };

            // 发送请求到 Servlet
            const response = await fetch('/demo1/AiServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestBody)
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const result = await response.json();
            console.log('Servlet response:', result);

            if (result.status === "error") {
                alert("Error: " + result.message);
            } else {
                alert("Response: " + result);
            }
        } catch (error) {
            console.error("Error in analyzing image:", error);
            alert("Error in analyzing image: " + error.message);
        }
    }
    document.getElementById('hamburger').addEventListener('click', function () {
        var sidebar = document.getElementById('sidebar');
        var content = document.getElementById('content');
        var isOpen = sidebar.classList.contains('active');
        if (isOpen) {
            sidebar.classList.remove('active');
            content.classList.remove('with-sidebar');
        } else {
            sidebar.classList.add('active');
            content.classList.add('with-sidebar');
        }
    });
    var gameContainer = document.getElementById('data');
    var registrationContainer = document.getElementById('registration');
    var recordsTableContainer = document.getElementById('records');
    var passwordChangeContainer = document.getElementById('UserPasswordChange');
    function Data() {
        gameContainer.style.display = 'block';
        registrationContainer.style.display = 'none';
        recordsTableContainer.style.display ='none';
        passwordChangeContainer.style.display = 'none';
    }
    function uploadBill() {
        gameContainer.style.display = 'none';
        registrationContainer.style.display = 'block';
        recordsTableContainer.style.display ='none';
        passwordChangeContainer.style.display = 'none';
    }
    function selectCompany() {
        gameContainer.style.display = 'none';
        registrationContainer.style.display = 'none';
        recordsTableContainer.style.display ='block';
        passwordChangeContainer.style.display = 'none';
    }
    function PasswordChange() {
        gameContainer.style.display = 'none';
        registrationContainer.style.display = 'none';
        recordsTableContainer.style.display ='none';
        passwordChangeContainer.style.display = 'block';
    }
    document.addEventListener('DOMContentLoaded', () => {
        const searchButton = document.getElementById('searchButton');
        if (searchButton) {
            searchButton.addEventListener('click', () => {
                fetchCompanysWithFilters(currentPage);
            })
        } else {
            console.error("Search button not found. Please check the ID.");
        }
    });
    let currentPage = 1; // 当前页码
    let totalPages = 1; // 总页数
    let totalRecords = 0; // 总记录数

    function fetchCompanysWithFilters(page) {
        // 获取每个输入框的值
        const name = document.getElementById('companyNameInput').value.trim();
        const nature = document.getElementById('companyNatureInput').value.trim();
        const industry = document.getElementById('companyIndustryInput').value.trim();
        const province = document.getElementById('companyProvinceInput').value.trim();
        const city = document.getElementById('companyCityInput').value.trim();

        // 构造查询参数
        const queryParams = new URLSearchParams({
            name: name || "",
            nature: nature || "",
            industry: industry || "",
            province: province || "",
            city: city || "",
            limit: 10,
            page: page || 1 // 默认第一页
        });

        // 发送请求
        fetch(`/zuel/company/list?${queryParams}`, {
            method: 'GET', // 使用 GET 方法
            headers: {
                'Content-Type': 'application/json' // 设置请求头为 JSON
            }
        })
            .then(response => response.json())
            .then(data => {
                const recordsTableBody = document.getElementById('Companys').querySelector('tbody');
                recordsTableBody.innerHTML = ''; // 清空现有记录

                data.records.forEach(company => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                <td>${company.id}</td>
                <td>${company.name}</td>
                <td>${company.nature}</td>
                <td>${company.industry}</td>
                <td>${company.province}</td>
                <td>${company.city}</td>
            `;
                    recordsTableBody.appendChild(row);
                });

                // 更新分页信息
                currentPage = data.current || 1;
                totalPages = data.pages || 1;
                totalRecords = data.total || 0;

                // 更新分页信息显示
                document.getElementById('currentPage').textContent = currentPage;
                document.getElementById('totalPages').textContent = totalPages;
                document.getElementById('totalRecords').textContent = totalRecords;

                // 更新按钮状态
                document.getElementById('prevPage').disabled = currentPage <= 1;
                document.getElementById('nextPage').disabled = currentPage >= totalPages;
            })
            .catch(error => {
                console.error('Error fetching companys:', error);
            });
    }

    // 初始化分页按钮事件
    document.getElementById('prevPage').addEventListener('click', () => {
        if (currentPage > 1) {
            fetchCompanysWithFilters(currentPage - 1);
        }
    });

    document.getElementById('nextPage').addEventListener('click', () => {
        if (currentPage < totalPages) {
            fetchCompanysWithFilters(currentPage + 1);
        }
    });

    function ChangePatPassword() {
        const usedpassword = document.getElementById('usedpassword').value;
        const nowpassword = document.getElementById('nowpassword').value;
        const nowpassword1 = document.getElementById('nowpassword1').value;

        // 构建要提交的数据对象
        const passwordInfo = {
            usedpassword: usedpassword,
            nowpassword: nowpassword,
            nowpassword1: nowpassword1
        };

        // 发送POST请求到服务器
        fetch('/demo1/UserPassWordChangeServlet', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(passwordInfo),
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Response:', data);
                if (data.status === 'success') {
                    alert(data.message); // 显示成功消息
                    // 清空输入框
                    document.getElementById('usedpassword').value = '';
                    document.getElementById('nowpassword').value = '';
                    document.getElementById('nowpassword1').value = '';
                } else {
                    alert(data.message); // 显示失败消息
                }
            })
            .catch(error => {
                console.error('Error submitting password change:', error);
                alert('请求失败：' + error.message);
            });
    }
    function logout() {
        // 发送请求到后端以清空session
        fetch('/demo1/ExistServlet', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            // 可以发送一个空的JSON对象或者什么都不发送
            body: JSON.stringify({}),
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // 显示成功消息
                    alert(data.message); // 或者使用其他方式显示消息，比如在页面上显示
                    window.location.href = 'index.html'; // 重定向到登录页面或首页
                } else {
                    // 处理错误情况
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error logging out:', error);
            });
    }
    // 设置退出按钮的点击事件
    document.getElementById('logoutButton').addEventListener('click', logout);
</script>
</body>
</html>